<template>
  <div class="history-widget">
    <span class="history-info">历史</span>
    <div class="history-list" >
      <div class="list-wrapper">
        <span class="history-item" v-for="(item,i) in historyData" :key="i"  @click="searchKeyword(item)">{{item}}</span>
      </div>
    </div>
    <v-icon class="history-info" @click="clearHistory">
      mdi-delete
    </v-icon>
  </div>
</template>

<script>
export default {
    name: 'HistoryWidget',
    
    computed: {
      historyData: {
        get(){
          let key =  localStorage.getItem('historyKey');

          if(key){
            return JSON.parse(key);
          }
          return [];
        },

        set(n){
          localStorage.setItem('historyKey', JSON.stringify(n));
        }
      }
    },
    methods: {


      searchKeyword(data){

          this.$emit('keyword-click', data);
          
      },

      clearHistory(){
        this.historyData = [];
      }
    },
    created(){
      
    },
    mounted(){

    }
}
</script>

<style lang="scss"  scoped>
  @import '@/assets/styles/global';
  .history-widget {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: px2rem(10);
    .history-info {
      width: 14%;
      flex-shrink: 0;
    }

    .history-list {
      width: 72%;
      flex: 1;
      overflow: hidden;
      position: relative;
      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background-image: linear-gradient( #fff, transparent);
        background-image: -moz-linear-gradient(left, #fff, transparent);
        background-image: -webkit-linear-gradient(left, #fff, transparent);
        width: px2rem(8);
      }

      &::after {
        left: unset;
        right: 0;
        background-image: linear-gradient( transparent, #fff);
        background-image: -moz-linear-gradient(left, transparent,#fff);
        background-image: -webkit-linear-gradient(left, transparent, #fff);
      }

      .list-wrapper {
        overflow-x: auto;
        .history-item {
          display: inline-block;
          margin: 0 px2rem(4);
          border-radius: px2rem(16);
          line-height: px2rem(28);
          text-align: center;
          padding: 0 px2rem(6);
          @include defaultFontSize;
          color: #565656;
          background-color: rgb(226, 226, 226);
       }
      }

      
    }
  }


</style>